<button matTooltip="Trade" mat-fab color="accent" [disabled]="trades.length >= maxTrades" class="mat-fab mat-fab-bottom-right" (click)="addTrade()">
  <mat-icon>swap_horiz</mat-icon>
</button>
<ng-template app-buy-sell></ng-template>
<div style="width:97%;">
    <mat-grid-list cols="3" rows="2"  gutterSize="5px"   rowHeight="fit">
        <mat-grid-tile [ngClass]="{'full-height' : tile.columns == 3}" [colspan]="tile.columns" [rowspan]="tile.rows" *ngFor="let tile of dashboard.tiles">
            <mat-card class="full-card">
                <mat-card-header>
                    <mat-card-title>{{tile.title}}</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                        <div style="height:100%;width:100%;" [ngSwitch]="tile.id">
                            <app-trade-history  *ngSwitchCase="1"></app-trade-history>
                            <app-price-history style="height:100%;width:100%;" *ngSwitchCase="2"></app-price-history>
                            <app-my-orders  *ngSwitchCase="3"></app-my-orders>
                            <app-orders  *ngSwitchCase="4"></app-orders>
                        </div>
                </mat-card-content>
                <mat-card-footer>
                    <button *ngIf="!expanded" (click)="expandTile(tile)" mat-button>EXPAND</button>
                    <button *ngIf="expanded" (click)="resetTiles()" mat-button>RESTORE</button>
                </mat-card-footer>
            </mat-card>
        </mat-grid-tile>
    </mat-grid-list>
</div>
<div class="buy-sell-tab">
    <mat-card class="buy-sell-card mat-elevation-z12" *ngFor="let trade of trades">
        <mat-card-content>
            <app-buy-sell></app-buy-sell>
        </mat-card-content>
        <mat-card-footer>
            <div class="flex-spacer"></div>
            <button mat-raised-button color="warn" (click)="removeTrade(trade)">CLOSE</button>
        </mat-card-footer>
    </mat-card>
</div>